<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex justify-between pt-26px pl-26px pr-26px">
            <div class="w-full table-container">
                <el-table :data="state.tableData" class="w-full" :fit="true">
                    <el-table-column prop="ID" label="序号" align="center"></el-table-column>
                    <el-table-column prop="ProductsNumber" label="产品数量" align="center"></el-table-column>
                    <el-table-column prop="ServiceOpenTime" label="服务开始时间" align="center">
                        <template #default="scope">
                            {{ formatDate(scope.row.ServiceOpenTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="endDate" label="服务结束时间" align="center">
                        <template #default="scope">
                            {{ formatDate(scope.row.ServiceEndTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="服务状态" align="center">
                        <template #default="scope">
                            <el-tag :type="typeStatus(scope.row.Status)">{{ formatStatus(scope.row.Status) }}</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </div>

</template>

<script setup lang="ts">
import { getServiceApi } from '@/api/b2b'
import { formatDateString } from '@/utils/date'

const state = reactive({
    tableData:[]
})

const formatDate = computed(() => {
    return function (data: string) {
        return formatDateString(data, 'YYYY-MM-DD')
    }
})

function formatStatus(val:number){
    if(val === 1){
        return '正在服务中'
    }else if(val === 2){
        return '服务未开始'
    }else{
        return '服务已到期'
    }
}

function typeStatus(val:number){
    if(val === 1){
        return 'success'
    }else if(val === 2){
        return 'info'
    }else{
        return 'danger'
    }
}

async function getService(){
    const res: ResType = await getServiceApi()
    console.log(res)
    state.tableData = res.data
}

onMounted(() => {
    getService()
})
</script>

<style scoped></style>